<template>
    <div>
        <Header :info="publicData.baseInfo"></Header>

        <StatisticsSearch :options="statisOptions" @submit="onSubmit" />

        <TotalData :total-data="publicData.totalInfo" />
        <LineCard ref="lineCardRef" :line-data="publicData.lineInfo" @changeType="getCensus" />

        <div class="scale">
            <PreCard :title="`参与者性别`" :browse-data="publicData.browseInfo" />
            <VisualMap :title="`行政区域客户分布`" :browse-data="publicData.pcaInfo" />
        </div>
        <Table
            ref="tableRef"
            class="table"
            :info-data="publicData.tableInfo"
            @exportData="exportData"
            @SortData="sortData"></Table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';

import Header from './components/DetailHeader.vue';
import TotalData from './components/TotalData.vue';
import LineCard from './components/LineCard.vue';
import PreCard from './components/PreCard.vue';
import VisualMap from './components/Visual.vue';
import Table from './components/Table.vue';
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue';

import { baseInfo, totalData, census, preData, win } from '@/api/smartMarketing/newLottery';

import { useStore } from '@/store';
import { getDay } from '@/utils/utils';

const route = useRoute();
const store = useStore();
const pickDay = ref();
const tableRef = ref();
const impose = ref(180);
const lineCardRef: any = ref(null);

const publicData = reactive({
    baseInfo: {},
    totalInfo: {},
    lineInfo: {},
    preInfo: {},
    browseInfo: {},
    pcaInfo: {},
    tableInfo: []
});
const publicParams = reactive({
    activity_id: route.query.id,
    date_type: '1',
    date: []
});
const selectTime = (val: string) => {
    publicParams.date_type = val;
    switch (val) {
        case '1':
            publicParams.date = [getDay(-1), getDay(-1, true)];
            break;
        case '2':
            publicParams.date = [getDay(-6), getDay(0, true)];
            break;
        case '3':
            publicParams.date = [getDay(-29), getDay(0, true)];
            break;
        case '4':
            publicParams.date = [];
            break;
    }
};
selectTime('2');

const statisOptions = reactive([
    {
        label: '时间筛选',
        type: 'dateFilter'
    }
]);
const onSubmit = (data: any) => {
    publicParams.date = data.times || [];
    nextTick(() => {
        if (data.times) {
            getCensus(data.currentId);
            searchApi();
        }
    });
};

const getBaseInfo = () => {
    baseInfo({ activity_id: publicParams.activity_id }).then((res: any) => {
        publicData.baseInfo = res;
    });
};
const getTotalData = () => {
    totalData(publicParams).then((res: any) => {
        publicData.totalInfo = res;
    });
};
const getCensus = (t?: number) => {
    const res = { type: t, ...publicParams };
    census(res).then((res: any) => {
        publicData.lineInfo = res;
    });
};
const getPreData = () => {
    preData(publicParams).then((res: any) => {
        publicData.browseInfo = res.participant_sex;
        publicData.pcaInfo = res.participant_region;
    });
};
const sortData = (data: any) => {
    const res = { ...data, ...publicParams };
    win(res).then((res: any) => {
        publicData.tableInfo = res.data;
        store.dispatch('pageTotal', res.total);
    });
};

const searchApi = () => {
    getTotalData();
    // getCensus(1)
    getPreData();
    lineCardRef.value.custId = 1;
    sortData(tableRef.value.params);
};

watch(
    () => publicParams.date_type,
    val => {
        if (val !== '4') searchApi();
    }
);
onMounted(() => {
    getBaseInfo();
});
</script>
<style lang="scss" scoped>
.layout {
    :deep(.el-card__body) {
        padding: 16px 20px 14px;
    }

    .searchForm {
        display: flex;
        align-items: center;
        background: #fff;
        justify-content: space-between;

        .el-form-item {
            margin-bottom: 0;
        }

        .first_item {
            margin-top: 2.5px;

            :deep(.el-form-item__label) {
                margin-top: -5px;
            }
        }

        .form_item_input {
            .el-input__inner {
                width: 100px;
            }
        }

        .filter_time {
            margin-top: 4px;
            max-width: 285px;

            :deep(.date_pick) {
                width: 285px;
            }
        }

        .selectTime {
            .selectTime_btn {
                display: flex;
                align-items: center;

                &_item {
                    padding: 0 17px;
                    background: #fff;
                    border-radius: 4px;
                    border: 1px solid #eaeaea;
                    cursor: pointer;
                }

                .active {
                    border: 1px solid #ff6b00;
                    color: #ff6b00;
                }
            }
        }
    }

    .scale {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 16px;
        align-items: center;

        .m_l {
            width: 15px;
        }
    }

    .btn_box {
        display: flex;
        align-items: center;
    }
}

.scale {
    display: flex;
    align-items: center;
    margin-top: 16px;

    .m_l {
        width: 15px;
    }
}
</style>
